<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }>
</script>
<meta name="keywords" content="Happy Pets Responsive web template, Bootstrap Web Templates, Flat Web Templates, AndriodCompatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<!--Google Fonts-->
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:200,300,400,600,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/menu_jquery.js"></script>

	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
<!-- //end-smoth-scrolling -->
</head>
<body>
<script>$(document).ready(function(c) {
	$('.ban-main-cls').on('click', function(c){
		$('.bann-close').fadeOut('slow', function(c){
	  		$('.bann-close').remove();
		});
	});	  
});
</script>
<!--header start here-->
<div class="header">
		<div class="header-main">
          <div class="top-nav">
			  	<span class="menu"> <img src="images/icon.png" alt=""/></span>
				<ul class="res">
					<li><a class="active  scroll" href="#home">Home</a></li>
					<li><a class="scroll" href="#about">About</a></li>
					<li><a class="scroll" href="#team">Team</a></li>
					<li><a class="scroll" href="#service">Services</a></li>
					<li><a class="scroll" href="#gallery">Gallery</a></li>
					<li><a class="scroll" href="#contact">Contact</a></li>
				</ul>
				<!-- script-for-menu -->
							 <script>
							   $( "span.menu" ).click(function() {
								 $( "ul.res" ).slideToggle( 300, function() {
								 // Animation complete.
								  });
								 });
							</script>
			<!-- /script-for-menu -->
			 </div>	
			 <div class="header-right">
			 <div class="search-box">
				<div id="sb-search" class="sb-search">
					<form>
						<input class="sb-search-input" placeholder="Search" type="search" name="search" id="search">
						<input class="sb-search-submit" type="submit" value="">
						<span class="sb-icon-search"> </span>
					</form>
			   </div>
			</div>
			  <!-- search-scripts -->
					<script src="js/classie.js"></script>
					<script src="js/uisearch.js"></script>
						<script>
							new UISearch( document.getElementById( 'sb-search' ) );
						</script>
					<!-- //search-scripts -->
					<div class="head-button">
					<div id="loginContainer"><a href="#" id="loginButton"><span>Login</span></a>
						    <div id="loginBox">                
						        <form id="loginForm">
						                <fieldset id="body">
						                	<fieldset>
						                          <label for="email">Email Address</label>
						                          <input type="text" name="email" id="email">
						                    </fieldset>
						                    <fieldset>
						                            <label for="password">Password</label>
						                            <input type="password" name="password" id="password">
						                     </fieldset>
						                    <input type="submit" id="login" value="Sign in">
						                	<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
						            	</fieldset>
						            <span><a href="#">Forgot your password?</a></span>
							 </form>
				        </div>
					</div>
				</div>
		<div class="clearfix"> </div>
     </div>
     <div class="clearfix"> </div>
   </div>	

</div>
<!--header end here-->
<!--banner start here-->
<div class="banner">
	<div class="container">
		<div class="banner-main">
			 <a href="index.html"><img src="images/logo.png" alt="" class="img-class"></a>
			 <div class="bann-close">
			 	<div class="ban-main-cls"><img src="images/close.png" alt="" class="img-responsive"></div>
			 	<h2>Open House</h2>
			 	<p>Lorem ipsum dolor sit amet</p>
			 	<p>Friday September 18</p>
			 	<p>10am-2pm</p>
			 </div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="bann-strip">
			 	<a class="scroll" href="#about"><img src="images/down.png" alt=""></a>
	</div>
</div>
<!--banner end here-->
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >免费网站模板</a></div>
<!--about start here-->
<div class="about" id="about">
	<div class="container">
		<div class="about-main">
			<h3>About Us</h3>
			<div class="about-bottom">
			<div class="col-md-6 about-left">
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
			    <p> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum</p>
			   <div class="social-icons">
			   	<ul>
					<li><a class="facebook" href="#"><span> </span></a></li>
					<li><a class="twitter" href="#"><span> </span></a></li>
					<li><a class="gmail" href="#"><span> </span></a></li>
					<li><a class="dribble" href="#"><span> </span></a></li>
				</ul>
			   </div>
			</div>
			<div class="col-md-6 about-right">
			    <div class="about-grid">
			    	<div class="about-box">
			    		<h5><span class="ab-box">01</span></h5>
			    	</div>
			    	<div class="about-text">
			    		<h4>Temporibus autem quibusdam officiis debitis </h4>
			    		<p>who are so beguiled and demoralized by the charms of pleasure the moment,  desire, that they cannot foresee the pain.</p>
			    	</div>
			      <div class="clearfix">  </div>
			    </div>
			    <div class="about-grid ab-more">
			    	<div class="about-box">
			    		<h5><span class="ab-box">02</span></h5>
			    	</div>
			    	<div class="about-text">
			    		<h4>Nam libero tempore soluta eligendi cumque</h4>
			    		<p>But in certain circumstances and owing to the claims of duty or the obligations it will frequently occur that pleasures.</p>
			    	</div>
			      <div class="clearfix">  </div>
			    </div>
			    <div class="about-grid">
			    	<div class="about-box">
			    		<h5><span class="ab-box">03</span></h5>
			    	</div>
			    	<div class="about-text">
			    		<h4>On the other hand denounce with righteou</h4>
			    		<p>Certain circumstances and owing to the claims of duty the obligations frequently occur that pleasures repudiat.</p>
			    	</div>
			       <div class="clearfix">  </div>
			    </div>
			</div>
		  </div>
		  <div class="clearfix">  </div>
		</div>
	</div>
</div>
<!--about end here-->
<!--team start here-->
<div class="team-member" id="team">
	<div class="container">
		<div class="team-main">
			<h3>Our Team</h3>
			<div class="team-bottom">
			   <div class="col-md-3 team-grid">
				<img src="images/t1.jpg" alt="" class="img-responsive">
				<div class="about-details">
					<h4>Finibus Bonorum</h4>
					<p>Sed ut perspiciatis unde</p>
				</div>
			   </div>
			   <div class="col-md-3 team-grid">
				<img src="images/t2.jpg" alt="" class="img-responsive">
				<div class="about-details">
					<h4>Bonorum Finibus</h4>
					<p>Sed ut perspiciatis unde</p>
				</div>
			   </div>
			   <div class="col-md-3 team-grid">
				<img src="images/t3.jpg" alt="" class="img-responsive">
				<div class="about-details">
					<h4>Malorum Bonorum</h4>
					<p>Sed ut perspiciatis unde</p>
				</div>
			   </div>
			   <div class="col-md-3 team-grid">
				<img src="images/t4.jpg" alt="" class="img-responsive">
				<div class="about-details">
					<h4>Bonorum  Malorum</h4>
					<p>Sed ut perspiciatis unde</p>
				</div>
			   </div>
			</div>
		  <div class="clearfix">  </div>
		</div>
	</div>
</div>
<!--team end here-->
<!--services start here-->
<div class="services" id="service">
	<div class="container">
		<div class="services-main">
			 <h3>Services</h3>
			 <div class="service-bottom">
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s1.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s2.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s3.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s4.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="clearfix"> </div>
			 </div>
			 <div class="service1">
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s5.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s6.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s7.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="col-md-3 service-grid">
			 		<img src="images/s8.png" alt="">
			 		<h4>Neque porro quisquam est</h4>
			 		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
			 	</div>
			 	<div class="clearfix"> </div>
			 </div>
		</div>
	</div>
</div>
<!--services end here-->
<!--clients start here-->
<div class="clients">
	<div class="container">
		<div class="clients-main">
        <div class="col-md-6 clients-left">
          <h3>Our Mission Statement</h3>
          <h4>Fusce dapibus, tellus ac cursus commodo.Contrary to popular belief</h4>
          <p >Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard</p>
           <div class="client-btn">
           	  <a href="#">Read more</a>
           </div>
        </div>
        <div class="col-md-6 clients-right">
          <h3>How The Pasts Remove</h3>
          <h4>Tellus ac cursus commodo.Contrary to popular beliefFusce dapibus</h4>
          <p >Ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard Donec </p>
           	<div class="client-btn">
           	  <a href="#">Read more</a>
           </div>
           </div>
        </div>
    </div>
</div>
<!--clients end here-->
<!--gallery start here-->
<!--light-box-files -->
		<script src="js/jquery.chocolat.js"></script>
		<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
		<!--light-box-files -->
		<script type="text/javascript" charset="utf-8">
		$(function() {
			$('.gallery-bottom a').Chocolat();
		});
		</script>

<div class="gallery" id="gallery">
	<div class="container">
		<div class="gallery-main">
			<h3>Gallery</h3>
			<div class="gallery-bottom">
				<div class="gallery-1">
					<div class="col-md-3 gallery-left">
						<a href="images/p1.jpg" rel="title">
							<img class="img-responsive" src="images/p1.jpg" alt="">
						</a>
					</div>
					<div class="col-md-3 gallery-left">
						<a href="images/p2.jpg" rel="title">
							<img class="img-responsive" src="images/p2.jpg" alt="">
						</a>
					</div>
					<div class="col-md-3 gallery-left">
						<a href="images/p3.jpg" rel="title">
							<img class="img-responsive" src="images/p3.jpg" alt="">
						</a>
					</div>
					<div class="col-md-3 gallery-left">
						<a href="images/p4.jpg" rel="title">
							<img class="img-responsive" src="images/p4.jpg" alt="">
						</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="gallery-1">
					<div class="col-md-3 gallery-left">
						<a href="images/p5.jpg" rel="title">
							<img class="img-responsive" src="images/p5.jpg" alt="">
						</a>
					</div>
					<div class="col-md-3 gallery-left">
						<a href="images/p6.jpg" rel="title">
							<img class="img-responsive" src="images/p6.jpg" alt="">
						</a>
					</div>
					<div class="col-md-3 gallery-left">
						<a href="images/p7.jpg" rel="title">
							<img class="img-responsive" src="images/p7.jpg" alt="">
						</a>
					</div>
					<div class="col-md-3 gallery-left">
						<a href="images/p8.jpg" rel="title">
							<img class="img-responsive" src="images/p8.jpg" alt="">
						</a>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>

		 </div>
	</div>
</div>
<!--gallery  end here-->
<!--contact start here-->
<div class="contact" id="contact">
	<div class="container">
		<div class="contact-main">
			<h3>Contact</h3>
			<div class="contact-right">
			  <form>
				<input type="text" value="Your Name" class="name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Your Name';}">
				<input type="text" value="Your Email"  onfocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Your Email';}">
				<textarea onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
			   	<input type="submit" value="Send">
			 </form>
		   </div>
		  <div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--contact end here-->
<!--map start here-->
<div class="map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158858.182370726!2d-0.10159865000000001!3d51.52864165!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C+UK!5e0!3m2!1sen!2sin!4v1434426783156"> </iframe>
</div>
<!--map end here-->
<!--contact start here-->
<div class="footer">
	<div class="container">
		<div class="footer-main">
			<div class="col-md-5 footer-left">
	           <p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>	
			</div>
			<div class="col-md-7 footer-right">
				<ul>
					<li><a class="active  scroll" href="#home">Home</a></li>
					<li><a class="scroll" href="#about">About</a></li>
					<li><a class="scroll" href="#team">Team</a></li>
					<li><a class="scroll" href="#service">Services</a></li>
					<li><a class="scroll" href="#gallery">Gallery</a></li>
					<li><a class="scroll" href="#contact">Contact</a></li>
				</ul>
			</div>
		  <div class="clearfix"> </div>
		</div>
	</div>
	<script type="text/javascript">
										$(document).ready(function() {
											/*
											var defaults = {
									  			containerID: 'toTop', // fading element id
												containerHoverID: 'toTopHover', // fading element hover id
												scrollSpeed: 1200,
												easingType: 'linear' 
									 		};
											*/
											
											$().UItoTop({ easingType: 'easeOutQuart' });
											
										});
									</script>
						<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</div>
<!--footer end here-->
</body>
</html>